<template>
  <div>
    <div class="btn">
      <el-page-header @back="goBack" content="项目详情"> </el-page-header>
    </div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <template v-for="(item, index) in tabList">
        <el-tab-pane
          :label="item.label"
          :name="item.name"
          :key="index"
        ></el-tab-pane>
      </template>
      <router-view />
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: localStorage.getItem("activeName") || "SchemeDesign",
      tabList: [
        {
          label: "能力分解",
          name: "Capability",
        },
        {
          label: "作战方案设计",
          name: "SchemeDesign",
        },
      ],
    };
  },
  methods: {
    handleClick(tab) {
      localStorage.setItem("activeName", tab.name);
      this.$router.push(`/app/projectDetail/${tab.name}`);
    },
    goBack() {
      this.$router.push("/app/project");
    },
  },
};
</script>
<style lang="scss" scoped>
.btn {
  margin-bottom: 16px;
}
</style>
